<template>
    <div>
        <el-table
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="clothesMaterialName"
                    label="衣物材质"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="washKindName"
                    label="洗衣方式"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="clothesKindName"
                    label="衣物种类"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="clothesPrice"
                    label="价格"
                    width="180">
            </el-table-column>
            <el-table-column v-if="this.status!='已完成'" label="衣物状态" prop="status" width="180" sortable>
                <template v-slot="scope">
                    <el-progress v-if="scope.row.clothesIsbad==0" :percentage="scope.row.percentage" :color="customColor"></el-progress>
                    <p v-else> 衣服已损坏</p>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="margin-top: 10px;">
            <el-pagination background :current-page="params.pageNum" :page-size="params.pageSize"
                           layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import request from "@/request"

    export default {
        name: "OrderItemInfo",
        data(){
            return{
                orderId : this.$route.query.param,
                status : this.$route.query.flag,
                total: 0,
                tableData:[],
                params: {
                    pageNum: 1,
                    pageSize: 6,

                },
            }
        },
        methods:{
            load() {
                this.params.orderId=this.orderId
                request.get('/order/info', {
                    params: this.params
                }).then(res => {
                    if (res.code === "200") {
                        this.total = res.data.total;
                        this.tableData = res.data.list;
                    }
                })
            },
            customColor(percentage) {
                if (percentage == 100) {
                    return '#67c23a';
                } else  {
                    return '#e6a23c';
                }
            },
        },
        mounted() {
            this.load()
        }

    }
</script>
